<template>
  <div>
    <el-button type="primary" class="btn" @click="add">添加</el-button>
    <v-list :obj="obj" :listdata="listdata" @refresh="refresh" @change="change" @root="root"></v-list>
    <v-form :obj="obj" :menudata="menudata" :listdata="listdata" @refresh="refresh" ref="form"></v-form>
  </div>
</template>

<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqMenuList, reqRolelist } from "../../request/api.js";
export default {
  components: { vList, vForm },
  data() {
    return {
      obj: {
        isshow: false,
        isadd: true
      },
      menudata: [],
      listdata: []
    };
  },
  methods: {
    add() {
      this.obj.isshow = true;
      this.obj.isadd = true;
    },
    root(id) {
      reqMenuList({ istree: true }).then(res => {
        this.menudata = res.data.list;
      });
    },
    //刷新，请数据渲染
    refresh() {
      reqRolelist().then(res => {
        this.listdata = res.data.list?res.data.list:[];
      });
    },
    change(id) {
      this.$refs.form.change(id);
    }
  },
  mounted() {
    this.refresh();
    this.root();
  }
};
</script>

<style>
</style>